<template>
  <div id="app" class="skSendUser">
    <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
      <a-form-model-item label="接收用户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
        <a-radio-group v-model="model.msgType"  @change="onChange">
          <a-radio v-for="item in msgTypeList" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="选择用户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name" v-if="model.msgType == 'USER'">
        <a-tree-select
          v-model="model.checkedKeys"
          style="width: 100%"
          :tree-data="treeData"
          tree-checkable
          :show-checked-strategy="SHOW_CHECKED"
          search-placeholder="请选择用户"
        />
      </a-form-model-item>
      <a-form-model-item label="选择租户" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tenantIds" v-if="model.msgType == 'TENANT' && TenantIds">
        <j-multi-select-tag
          v-model="model.tenantIds"
          dictCode="sys_tenant,name,id,status=1"
          placeholder="请选择租户">
        </j-multi-select-tag>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
import { httpAction, getAction } from '@/api/manage'
import { TreeSelect } from 'ant-design-vue';
// TreeSelect.SHOW_ALL: 显示所有选中节点(包括父节点). 
// TreeSelect.SHOW_PARENT: 只显示父节点(当父节点下所有子节点都选中时). 
// TreeSelect.SHOW_CHILD：只显示子节点.
const SHOW_CHECKED = TreeSelect.SHOW_CHILD;
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
export default {
  name: 'skSendUser',
  data() {
    return {
      model:{
        msgType:"",
        checkedKeys:[],
        tenantIds:""
      },
      validatorRules:{},
      msgTypeList:[],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      autoExpandParent: true,   //是否自动展开父节点
      treeData:[],
      selectedKeys:[],
      SHOW_CHECKED,
      classList:[]
    }
  },
  props:{
    value:Object,
    MsgType:{
      type:Array,
      default:()=>[
        // {value:"ALL",label:"全体用户"},
        {value:"USER",label:"指定用户"},
        {value:"TEACHER",label:"所有教职工"},
      ]
    }
  },
  watch:{
    value:{
      handler(val){
        if (val) {
          this.model = val;
        }
        
      },
      immediate:true,
      deep:true
    },
    MsgType:{
      handler(val){
        if (val) {
          this.msgTypeList = val;
        }
      },
      immediate:true
    },

  },
  components: {},
  
  filters: {},

  computed: {
    TenantIds(){
      return this.$store.state.skCommon.relTenantIds.indexOf(Vue.ls.get(USER_INFO).relTenantIds) != -1
      // return this.$store.state.skCommon.relTenantIds == Vue.ls.get(USER_INFO).relTenantIds
    }
  },
  
  created() {
    // 判断只有教体局可以显示
    if (this.TenantIds) {
      this.msgTypeList = [
        {value:"ALLTENANT",label:"全体租户"},
        {value:"TENANT",label:"指定租户"},
      ]
    }else{
      this.getClassList();
      this.msgTypeList.push({value:"PARENT",label:"所有家长"})
    }
  },

  activated() {},

  mounted() {},

  methods: {
    // 获取所有的班级
    getClassList(){
      const url = "/management/skClass/list"
      getAction(url).then((res)=>{
        if(res.success){
          this.classList = []
          res.result.forEach(item => {
            let json = {
              title:item.className,
              key:item.id,
              value:item.id,
              children:[],
              disabled:false
            }
            this.classList.push(json)
          });
          this.chooseMsgType()
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    chooseMsgType(){
      const url = "/sys/user/getTenantUsers"
      this.treeData = []
      getAction(url).then((res)=>{
        if(res.success){
          this.handeTreeData(res.result)
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    handeTreeData(list){
      list.forEach(item => {
        let json = {
          title:item.tenantName,
          key:item.tenantId,
          value:item.tenantId,
          children:[
            {
              title:"教职工",
              key:item.tenantId + "3",
              value:item.tenantId + "3",
              children:[]
            },
            {
              title:"家长",
              key:item.tenantId + "4",
              value:item.tenantId + "4",
              children:this.classList
            },
            {
              title:"管理员",
              key:item.tenantId + "5",
              value:item.tenantId + "5",
              children:[]
            }
          ]
        }
        item.sysUserList.forEach(el => {
          if (el.userIdentity == 3) {
            json.children[0].children.push(
              {
                title:el.realname,
                key:el.id,
                value:el.id,
              }
            )
          }
          if (el.userIdentity == 4) {
            json.children[1].children.forEach(c=>{
              if (c.value == el.classId) {
                c.children.push({
                  title:el.realname,
                  key:el.id,
                  value:el.id,
                })
              }
              if (c.children.length == 0) {
                c.disabled = true;
              }else{
                c.disabled = false;
              }
            })
          }
          if (el.userIdentity == 5) {
            let adminId = Vue.ls.get(USER_INFO).id;
            if (adminId != el.id) {
              json.children[2].children.push(
                {
                  title:el.realname,
                  key:el.id,
                  value:el.id,
                }
              )
            }
          }
        });
        this.treeData.push(json)
      });
      console.log(this.treeData);
    },
    onChange() {
      let json = {
        msgType:this.model.msgType,
        checkedKeys:[],
        tenantIds:""
      }
      this.model = json;
      this.$emit("change",this.model )
    },
  },
  model:{
    prop: 'value',
    event: 'change'
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
